<template>
  <div class="PublicDaataReport-container">
    <div>
      <el-radio-group v-model="TabValue" @change="checkReportKind">
        <el-radio-button label="总报表"></el-radio-button>
        <el-radio-button label="分公司报表"></el-radio-button>
      </el-radio-group>
    </div>
    <!-- 栅格 输入框 和按钮 -->
    <el-row class="filterCondition">
      <div id="bigBox1" v-show="this.ShowTable.ShowCityDuoXuan" style="display:flex">
        <span id="give">城市:</span>
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
        >全选</el-checkbox>
        <div class="duoxuankuang" style="display:inline">
          <el-checkbox-group v-model="checkedCity" @change="handleCheckedCityChange">
            <el-checkbox
              v-for="(dange,index) in cityList2"
              :label="dange"
              :key="index"
            >{{dange.city}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div id="bigBox2" v-show="this.ShowZYCityDX" style="display:flex">
        <span id="give">城市:</span>
        <el-checkbox
          :indeterminate="isIndeterminate2"
          v-model="checkAll2"
          @change="handleCheckAllChange2"
        >全选</el-checkbox>
        <div class="duoxuankuang" style="display:inline">
          <el-checkbox-group v-model="checkedCity2" @change="handleCheckedCityChange2">
            <el-checkbox
              v-for="(dange,index) in cityList2"
              :label="dange"
              :key="index"
            >{{dange.city}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <el-form  label-width="82px"  label-position="right"  ref="formLabelAlign"  :model="formLabelAlign">
        <el-form-item label="报表类型" v-show="this.ShowZiYong">
          <el-select v-model="formLabelAlign.BaoBiaoType" id="time"  placeholder="请选择报表类型" @change="BaoBiaoKind" >
            <!-- <el-option v-for="item in timeList" :key="item.id" :label="item.name" :value="item.id"></el-option> -->
            <el-option label="全部" value=0></el-option>
            <el-option label="自营总报表" value=1></el-option>
            <el-option label="加盟总报表" value=2></el-option>
            <el-option label="外发总报表" value=3></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="type" label="经营类型" v-show="this.ShowTable.ShowJingYingType">
          <el-select v-model="formLabelAlign.type" placeholder="请选择经营类型" >
            <el-option label="加盟" value="jm" ></el-option>
            <el-option label="外发" value="wf" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="city" label="城市" v-show="this.ShowTable.ShowCityDX">
          <el-select v-model="formLabelAlign.city" placeholder="请选择城市" >
            <!-- <el-option label="所有" value="" ></el-option> -->
              <el-option
                v-for="item in WFcityList"
                :key="item.city"
                :label="item.city"
                :value="item.city"
              ></el-option>
              <!-- <el-option label="南京" value="南京" ></el-option> -->
            </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-select  v-model="formLabelAlign.dayType"  id="time"  @change="holderQuJian"  placeholder="时间">
            <el-option v-for="item in timeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="value1" label="时间区间" v-show="isShow">
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="daterange"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item class="BTN">
          <el-button style="background-color:#c73e3a;color:#fff" @click="checkCus" :disabled="disTBN" class="check">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <div class="ziYong" v-show="this.ShowZiYong">
    <!-- table -->
    <p class="titleWithLine" v-show="this.ShowTable.ShowAllZongTable"><i class="el-icon-arrow-down"></i> 营收报表</p>
    <el-table  :data="tableData"  v-show="this.ShowTable.ShowAllZongTable" :row-style="headerColor"  v-loading="loading"  border>
      <el-table-column  label="渠道"  >
        <template slot-scope="scope">{{ scope.row.quDaoName | PanNull}}</template>
      </el-table-column>
      <el-table-column prop="pingTaiName" label="平台" ></el-table-column>
      <!-- <el-table-column label="返点" >
        <template slot-scope="scope">{{ scope.row.rate | BaoLiuLiangWei}}</template>
      </el-table-column> -->
      <el-table-column prop="downMoney" label="消费"  align="center"></el-table-column>
      <el-table-column label="真实消费"  align="center">
        <template slot-scope="scope">{{ scope.row.reallyDownMoney | BaoLiuLiangWei }}</template>
      </el-table-column>
      <el-table-column prop="sqCount" label="申请"  align="center"></el-table-column>
      <el-table-column label="均价"  align="center">
        <template slot-scope="scope">{{ scope.row.avgMoney | BaoLiuLiangWei}}</template>
      </el-table-column>
      <el-table-column prop="c2Count" label="重复申请"  align="center"></el-table-column>
      <el-table-column prop="chuangShou" label="创收"  align="center"></el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <el-pagination  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="pageConfig.currentPage"  :page-sizes="[100, 200]"  :page-size="pageConfig.pageSize"  layout="total, sizes, prev, pager, next, jumper"  :total="pageConfig.total"></el-pagination> -->
    <el-collapse v-model="activeNames" v-show="this.ShowTable.ShowZYSTable">
      <el-collapse-item title="营收报表" name="1">
        <el-table  :data="ZYYStableData"  style="width: 100%" :row-style="headerColor"  v-loading="loading"  border>
          <el-table-column  label="渠道"  >
            <template slot-scope="scope">{{ scope.row.quDaoName | PanNull}}</template>
          </el-table-column>
          <el-table-column prop="pingTaiName" label="平台" align="center"></el-table-column>
          <el-table-column label="消费"  align="center">
            <template slot-scope="scope">{{ scope.row.downMoney | BaoLiuLiangWei }}</template>
          </el-table-column>
          <el-table-column label="真实消费"  align="center">
            <template slot-scope="scope">{{ scope.row.reallyDownMoney | BaoLiuLiangWei}}</template>
          </el-table-column>
          <el-table-column label="申请量"  align="center">
            <template slot-scope="scope">{{ scope.row.sqCount }}</template>
          </el-table-column>
          <el-table-column label="结算均价"  align="center">
            <template slot-scope="scope">{{ scope.row.avgDownMoney | BaoLiuLiangWei}}</template>
          </el-table-column>
          <el-table-column label="可贷均价"  align="center">
            <template slot-scope="scope">{{ scope.row.keDaiAvgMoney | BaoLiuLiangWei}}</template>
          </el-table-column>
          <el-table-column label="优质均价"  align="center">
            <template slot-scope="scope">{{ scope.row.youZhiAvgMoney | BaoLiuLiangWei}}</template>
          </el-table-column>
          <el-table-column prop="chuangShou" label="创收"  align="center"></el-table-column>
          <el-table-column label="单条数据利润"  align="center">
            <template slot-scope="scope">{{ scope.row.danTiaoLiRun | BaoLiuLiangWei}}</template>
          </el-table-column>
          <el-table-column label="放款件均" align="center">
            <template slot-scope="scope">{{ scope.row.avgFangKuan  | BaoLiuLiangWei}}</template>
          </el-table-column>
          <el-table-column label="ROI"  align="center">
            <template slot-scope="scope">{{ scope.row.roi  | ZhuanRate}}</template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="客户报表" name="2">
        <el-table  :data="ZYKHtableData"  style="width: 100%" :row-style="headerColor"  v-loading="loading"  border>
          <el-table-column  label="渠道"  >
            <template slot-scope="scope">{{ scope.row.quDaoName | PanNull}}</template>
          </el-table-column>
          <el-table-column prop="pingTaiName" label="平台" align="center"></el-table-column>
          <el-table-column prop="sqCount" label="申请"  align="center"></el-table-column>
          <el-table-column label="重复数/率"  align="center">
            <template slot-scope="scope">{{ scope.row.repeatCount | BaoLiuLiangWei}}/{{(scope.row.repeatRate | ZhuanRate)}}</template>
          </el-table-column>
          <el-table-column label="上门数/率"  align="center">
            <template slot-scope="scope">{{ scope.row.smCount | BaoLiuLiangWei}}/{{scope.row.smRate | ZhuanRate}}</template>
          </el-table-column>
          <el-table-column label="进件数/率"  align="center">
            <template slot-scope="scope">{{ scope.row.jinJianCount | BaoLiuLiangWei}}/{{scope.row.jinJianRate | ZhuanRate}}</template>
          </el-table-column>
          <el-table-column label="收款数/率"  align="center">
            <template slot-scope="scope">{{ scope.row.thePayeeCount | BaoLiuLiangWei}}/{{scope.row.thePayeeRate | ZhuanRate}}</template>
          </el-table-column>
          <el-table-column label="可贷数/率"  align="center">
            <template slot-scope="scope">{{ scope.row.keDaiCount | BaoLiuLiangWei}}/{{scope.row.keDaiRate | ZhuanRate}}</template>
          </el-table-column>
          <el-table-column label="优质数/率"  align="center">
            <template slot-scope="scope">{{ scope.row.youzhiCount | BaoLiuLiangWei}}/{{scope.row.youzhiRate | ZhuanRate}}</template>
          </el-table-column>
          <el-table-column label="待跟进数/率"  align="center">
            <template slot-scope="scope">{{ scope.row.dgjCount | BaoLiuLiangWei}}/{{scope.row.dgjRate | ZhuanRate}}</template>
          </el-table-column>
          <el-table-column label="未接通数/率"  align="center">
            <template slot-scope="scope">{{ scope.row.wjtCount | BaoLiuLiangWei}}/{{scope.row.wjtRate | ZhuanRate}}</template>
          </el-table-column>
          <el-table-column label="捣乱数/率"  align="center">
            <template slot-scope="scope">{{ scope.row.daoLuanCount | BaoLiuLiangWei}}/{{scope.row.daoLuanRate | ZhuanRate}}</template>
          </el-table-column>
          <el-table-column label="异地数/率"  align="center">
            <template slot-scope="scope">{{ scope.row.yidiCount | BaoLiuLiangWei}}/{{scope.row.yidiRate | ZhuanRate}}</template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
    <p class="titleWithLine" v-show="this.ShowTable.ShowJMZTable"><i class="el-icon-arrow-down"></i> 加盟总报表</p>
    <el-table  :data="JMYStableData"  style="width: 100%" v-show="this.ShowTable.ShowJMZTable" :row-style="headerColor"  v-loading="loading"  border>
      <el-table-column  label="渠道"  align="center">
        <template slot-scope="scope">{{ scope.row.quDaoName | PanNull}}</template>
      </el-table-column>
      <el-table-column prop="pingTaiName" label="平台" align="center"></el-table-column>
      <!-- <el-table-column label="返点" align="center">
        <template slot-scope="scope">{{ scope.row.rate | BaoLiuLiangWei}}</template>
      </el-table-column> -->
      <el-table-column label="消费"  align="center">
        <template slot-scope="scope">{{ scope.row.downMoney | BaoLiuLiangWei}}</template>
      </el-table-column>
      <el-table-column label="真实消费"  align="center">
        <template slot-scope="scope">{{ scope.row.reallyDownMoney | BaoLiuLiangWei}}</template>
      </el-table-column>
      <el-table-column prop="sqCount" label="申请"  align="center"></el-table-column>
      <el-table-column label="均价"  align="center">
        <template slot-scope="scope">{{ scope.row.avgMoney | BaoLiuLiangWei}}</template>
      </el-table-column>
      <el-table-column prop="c2Count" label="重复申请"  align="center"></el-table-column>
      <el-table-column prop="chuangShou" label="创收"  align="center"></el-table-column>
    </el-table>
    <p class="titleWithLine" v-show="this.ShowTable.ShowWFZTable"><i class="el-icon-arrow-down"></i> 外发总报表</p>
    <el-table  :data="WFYStableData"  style="width: 100%" v-show="this.ShowTable.ShowWFZTable" :row-style="headerColor"  v-loading="loading"  border>
      <el-table-column  label="渠道"  align="center">
        <template slot-scope="scope">{{ scope.row.quDaoName | PanNull}}</template>
      </el-table-column>
      <el-table-column prop="pingTaiName" label="平台" align="center"></el-table-column>
      <!-- <el-table-column label="返点" align="center">
        <template slot-scope="scope">{{ scope.row.rate | BaoLiuLiangWei}}</template>
      </el-table-column> -->
      <el-table-column label="消费"  align="center">
        <template slot-scope="scope">{{ scope.row.downMoney | BaoLiuLiangWei}}</template>
      </el-table-column>
      <el-table-column label="真实消费"  align="center">
        <template slot-scope="scope">{{ scope.row.reallyDownMoney | BaoLiuLiangWei}}</template>
      </el-table-column>
      <el-table-column label="均价"  align="center">
        <template slot-scope="scope">{{ scope.row.avgMoney | BaoLiuLiangWei}}</template>
      </el-table-column>
      <el-table-column prop="sqCount" label="结算数"  align="center"></el-table-column>
      <el-table-column prop="c2Count" label="创收"  align="center"></el-table-column>
      <el-table-column prop="chuangShou" label="ROI"  align="center"></el-table-column>
    </el-table>
    </div>
    <div class="FenGongSi" v-show="this.ShowFenGS">
      <p class="titleWithLine" v-show="this.ShowJiaMengFenGS"><i class="el-icon-arrow-down" ></i> 加盟分公司报表</p>
      <el-table  :data="FGStableData" v-show="this.ShowJiaMengFenGS" style="width: 100%"  v-loading="loading"  border>
        <el-table-column  label="分公司名称" align="center">
          <template slot-scope="scope">{{ scope.row.name}}</template>
        </el-table-column>
        <el-table-column prop="beginBalance" label="期初余额" align="center"></el-table-column>
        <el-table-column label="充值金额" align="center">
          <template slot-scope="scope">{{ scope.row.upMoney | BaoLiuLiangWei}}</template>
        </el-table-column>
        <el-table-column prop="sqCount" label="传输数量"  align="center"></el-table-column>
        <el-table-column label="损耗数">
        <el-table-column prop="c2Count" label="重复数量"  align="center"></el-table-column>
        <el-table-column prop="otherLoss" label="其他损耗"  align="center">
          <template scope="scope">
            <el-input style="width:100%" size="small" type="number" v-model="scope.row.otherLoss" placeholder="请输入其他损耗" ></el-input>
          </template>
        </el-table-column>
        </el-table-column>
        <el-table-column prop="endCount" label="结算数"  align="center"></el-table-column>
        <el-table-column prop="price" label="单价"  align="center">
          <template scope="scope">
            <el-input style="width:100%" size="small" type="number" v-model="scope.row.price" placeholder="请输入单价" ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="endMoney" label="结算金额"  align="center"></el-table-column>
        <el-table-column prop="endBalance" label="余额"  align="center"></el-table-column>
        <el-table-column label="单条数据成本"  align="center">
          <template slot-scope="scope">{{ scope.row.danTiaoChenhBen  | BaoLiuLiangWei}}</template>
        </el-table-column>
        <el-table-column label="单条数据利润"  align="center">
          <template slot-scope="scope">{{ scope.row.danTiaoLiRun  | BaoLiuLiangWei}}</template>
        </el-table-column>
        <el-table-column label="分类创收">
          <el-table-column label="数据创收"  align="center">
            <template slot-scope="scope">{{ scope.row.shuJuChuangShou  | BaoLiuLiangWei}}</template>
          </el-table-column>
          <el-table-column prop="revenue" label="坐席创收"  align="center">
            <template scope="scope">
              <el-input style="width:100%" size="small" type="number" v-model="scope.row.revenue" placeholder="请输入坐席创收" ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="总创收"  align="center">
          <template slot-scope="scope">{{ scope.row.allChuangShou  | BaoLiuLiangWei}}</template>
        </el-table-column>
        <el-table-column label="投资回报率"  align="center">
          <template slot-scope="scope">{{ scope.row.roi | ZhuanRate}}</template>
        </el-table-column>
        <el-table-column label="操作" align="center" >
        <template slot-scope="scope">
          <el-button  @click="handleEdit(scope.$index, scope.row)"  type="text"  size="small">确认编辑</el-button>
        </template>
      </el-table-column>
      </el-table>
      <p class="titleWithLine" v-show="!this.ShowJiaMengFenGS"><i class="el-icon-arrow-down" ></i> 外发分公司报表</p>
      <el-table  :data="WFFGStableData" v-show="!this.ShowJiaMengFenGS" style="width: 100%"   v-loading="loading"  border>
        <el-table-column  label="外发公司名称" align="center">
          <template slot-scope="scope">{{ scope.row.name}}</template>
        </el-table-column>
        <el-table-column prop="beginBalance" label="期初余额" align="center"></el-table-column>
        <el-table-column label="充值金额" align="center">
          <template slot-scope="scope">{{ scope.row.upMoney | BaoLiuLiangWei}}</template>
        </el-table-column>
        <el-table-column prop="sqCount" label="传输数量"  align="center"></el-table-column>
        <el-table-column label="损耗数">
          <el-table-column prop="c2Count" label="重复数量"  align="center"></el-table-column>
          <el-table-column prop="fallCount" label="失败数"  align="center"></el-table-column>
        </el-table-column>
        <el-table-column prop="endCount" label="结算数"  align="center"></el-table-column>
        <el-table-column prop="price" label="单价"  align="center">
          <template scope="scope">
            <el-input style="width:100%" size="small" type="number" v-model="scope.row.price" placeholder="请输入单价" @blur="handleWaiFaEdit(scope.$index, scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="endMoney" label="结算金额"  align="center"></el-table-column>
        <el-table-column prop="endBalance" label="余额"  align="center"></el-table-column>
        <el-table-column label="单条数据成本"  align="center">
          <template slot-scope="scope">{{ scope.row.danTiaoChenhBen  | BaoLiuLiangWei}}</template>
        </el-table-column>
        <el-table-column label="单条数据利润"  align="center">
          <template slot-scope="scope">{{ scope.row.danTiaoLiRun  | BaoLiuLiangWei}}</template>
        </el-table-column>
        <el-table-column label="数据创收"  align="center">
          <template slot-scope="scope">{{ scope.row.shuJuChuangShou  | BaoLiuLiangWei}}</template>
        </el-table-column>
        <el-table-column label="ROI"  align="center">
          <template slot-scope="scope">{{ scope.row.roi | ZhuanRate}}</template>
        </el-table-column>
        <!-- <el-table-column label="操作" align="center" >
          <template slot-scope="scope">
            <el-button  @click="handleEdit(scope.$index, scope.row)"  type="text"  size="small">确认编辑</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script>
// 导入时间戳
import moment from "moment";
import { log } from "util";
import { truncate } from 'fs';
export default {
  name: "PublicDaataReport",
  // 数据
  data() {
    return {
      TabValue:"总报表",
      checkAll: false,
      checkAll2: false,
      isIndeterminate: false,
      isIndeterminate2: false,
      checkedCity: [],
      checkedCity2: [],
      cityList: [], //城市列表
      cityList2: [], //城市列表
      WFcityList: "", //外发部分城市列表
      cityId: [], //城市ID
      cityNameList: [], //总表表自营-存储城市ID的数组
      ShowCity: false,
      activeNames: ['1'],
      visitDayTypeLinShi:1,  //显示与否
      ShowTable:{
        ShowAllZongTable:true, //营收报表
        ShowZYSTable:false, //总营收报表
        ShowJMZTable:false, //加盟总报表
        ShowWFZTable:false, //外发总报表
        ShowSGSTable:false, //分公司报表
        ShowCityDX:false, //总报表的城市单选
        ShowCityDuoXuan:true, //总报表的城市多选
        ShowJingYingType:false, //选择经营属性
      },
      currentUser: {
        currentName: "",
        currentId: "",
        currentLevel: "",
        currentPhone: ""
      },
      showDuoXuan:true,  //城市多选单选的显隐
      ShowZiYong:true,  //自用显示
      ShowFenGS:false,  //显示分公司数据
      ShowZYCityDX:false,  //自营城市多选框
      ShowJiaMengFenGS: true, //显示加盟外发分公司
      showTimeKind: true,
      value1: "", //未分割的完整版时间区间
      //时间区间隐藏状态
      isShow: false,
      loading:true,
      //页码参数
      pageConfig: {
        currentPage: 1, //当前页
        pageSize: 100, //当前单页数据条数
        total: 0 //请求到的数据总条数
      },
      kindtimeList: [
        { id: "beizhuTime", name: "备注时间" },
        { id: "fenpeiTime", name: "分配时间" }
      ],
      //时间选择生成内容
      timeList: [
        { id: "today", name: "今日" },
        { id: "yestoday", name: "昨日" },
        { id: "sevenDay", name: "最近七天" },
        { id: "tomonth", name: "本月" },
        { id: "yesmonth", name: "上月" },
        { id: "customize", name: "自定义" }
      ],
      //禁用按钮的状态值
      disTBN:false,
      //客户筛选区域数据
      formLabelAlign: {
        DisXuanBaoBiao: false, //	星级
        city: "", //	下拉框城市
        type: "jm", //	经营属性（外发）
        time: "", //	消耗时间
        BaoBiaoType: "0", //报表类型
        dayType: "",
        beginTime: "", //开始时间
        endTime: "", //	结束时间
        pageSize: "", //分页大小
        currentPage: "" //	当前页码
      },
      dialogFormVisible: false,
      formLabelWidth: "180px",
      // 表格依赖于数据没有数据  会一行都没有
      tableData: [], //全部总表
      ZYYStableData: [], //自营营收
      ZYKHtableData: [], //自营客户
      JMYStableData: [], //加盟营收
      WFYStableData: [], //外发营收
      FGStableData: [], //加盟分公司报表
      WFFGStableData: [], //外发分公司报表
      xinXiLiu:[], //信息流系 的index
      souSuoXi:[], //搜索系的index
      heZuoQD:[], //合作渠道的index
      QiTa:[] //合作渠道的index
    };
  },
  methods: {
    //设置总计行样式并分别遍历筛选出同类的index集合
    headerColor({ row, rowIndex }) {
      if (rowIndex == 0) {
        return " background-color:#82bfea ;color:#C73E3A";
      }
      if (row.quDaoName == "信息流系/合计") {
        return " background-color:#e3dbba;color:#000";
      }
      if (row.quDaoName == "渠道合作/合计") {
        return " background-color:#b2ce95;color:#000";
      }
      if (row.quDaoName == "搜索系/合计") {
        return " background-color:#d1dcb6;color:#000";
      }
      if (row.quDaoName == "其它/合计") {
        return " background-color:#C57CAC;color:#000";
      }
    },
    handleCheckAllChange(val) {
      this.checkedCity = val ? this.cityList : [];
        this.cityId = [];
      if (this.checkedCity != val) {
        // this.cityList.forEach(item => {
        //   this.cityId.push(item.name);
        // });
      } else {
        this.checkAll = false;
      }
      this.isIndeterminate = false;
    },
    //获取选中城市
    handleCheckedCityChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cityList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cityList.length;
      this.cityId = [];
      for (let i = 0; i < value.length; i++) {
        this.cityId.push(value[i].city);
      }
    },
    //获取选中城市2
    handleCheckAllChange2(val) {
      this.checkedCity2 = val ? this.cityList2 : [];
      if (this.checkedCity2 != val) {
        this.cityList2.forEach(item => {
          this.cityNameList.push(item.city);
        });
      } else {
        this.checkAll2 = false;
        this.cityNameList = [];
      }
      this.isIndeterminate2 = false;
    },
    handleCheckedCityChange2(value) {
      let checkedCount = value.length;
      this.checkAll2 = checkedCount === this.cityList2.length;
      this.isIndeterminate2 = checkedCount > 0 && checkedCount < this.cityList2.length;
      this.cityNameList = [];
      for (let i = 0; i < value.length; i++) {
        this.cityNameList.push(value[i].city);
      }
    },
    //获取报表的方法
    getReportList() {
      this.loading = true
      this.$axios
      .get(`/spider/consumptionLog/getPublicDataAll?city=${this.cityId}&dayType=${this.formLabelAlign.dayType}&pageSize=1000&currentPage=1`)
      .then(res => {
        // console.log(res);
        if (res.data.messageModel.code == 0) {
          this.tableData = res.data.dataModel;
          this.pageConfig.total = res.data.total;
          this.loading = false
        } else {
          this.$message.error(res.data.messageModel.messageText);
          this.tableData = [];
          this.pageConfig.total = res.data.total;
          this.loading = false
        }
      })
      .catch(error => {
        console.log(error);
      });
    },
    //获取自营营收报表的方法
    getZYYSList() {
      this.$axios
      .get(`/spider/consumptionLog/getPublicDataZy?dayType=${this.formLabelAlign.dayType}&beginTime=${this.formLabelAlign.beginTime}&endTime=${this.formLabelAlign.endTime}`)
      .then(res => {
        // console.log(res);
        let array = []
        if (res.data.messageModel.code == 0) {
          this.ZYYStableData = res.data.dataModel;
          array = res.data.dataModel;
          // this.Rearrange(array)
          this.loading = false
        } else {
          this.$message.error(res.data.messageModel.messageText);
          this.ZYYStableData = [];
          this.loading = false
        }
      })
      .catch(error => {
        console.log(error);
      });
    },
    //获取自营客户报表的方法
    getZYKHList() {
      this.$axios
      .get(`/spider/consumptionLog/getCustomerDataZy?dayType=${this.formLabelAlign.dayType}&beginTime=${this.formLabelAlign.beginTime}&endTime=${this.formLabelAlign.endTime}`)
      .then(res => {
        // console.log(res);
        let array = []
        if (res.data.messageModel.code == 0) {
          this.ZYKHtableData = res.data.dataModel;
          array = res.data.dataModel;
          // this.Rearrange(array)
          this.loading = false
        } else {
          this.$message.error(res.data.messageModel.messageText);
          this.ZYKHtableData = [];
          this.loading = false
        }
      })
      .catch(error => {
        console.log(error);
      });
    },
    //获取加盟总报表的方法
    getZJMList() {
      this.loading = true
      this.$axios
      // .get(`/spider/consumptionLog/getPublicDataJm?city=${this.formLabelAlign.city}&dayType=${this.formLabelAlign.dayType}&beginTime=${this.formLabelAlign.beginTime}&endTime=${this.formLabelAlign.endTime}`)
      .get(`/spider/consumptionLog/getPublicDataJm?city=${this.cityNameList}&dayType=${this.formLabelAlign.dayType}&beginTime=${this.formLabelAlign.beginTime}&endTime=${this.formLabelAlign.endTime}`)
      .then(res => {
        // console.log(res);
        let array = []
        if (res.data.messageModel.code == 0) {
          this.JMYStableData = res.data.dataModel;
          array = res.data.dataModel;
          // this.Rearrange(array)
          this.loading = false
        } else {
          this.$message.error(res.data.messageModel.messageText);
          this.JMYStableData = [];
          this.loading = false
        }
      })
      .catch(error => {
        console.log(error);
      });
    },
    //获取外发总报表的方法
    getZWFList() {
      this.loading = true
      this.$axios
      .get(`/spider/consumptionLog/getPublicDataWf?city=${this.cityId}&dayType=${this.formLabelAlign.dayType}&beginTime=${this.formLabelAlign.beginTime}&endTime=${this.formLabelAlign.endTime}`)
      .then(res => {
        // console.log(res);
        if (res.data.messageModel.code == 0) {
          this.WFYStableData = res.data.dataModel;
          this.loading = false
        } else {
          this.$message.error(res.data.messageModel.messageText);
          this.WFYStableData = [];
          this.loading = false
        }
      })
      .catch(error => {
        console.log(error);
      });
    },
    //获取分公司报表的方法
    getFGSList() {
      this.loading = true
      this.$axios
      .get(`/spider/consumptionLog/getDepartmentData?city=${this.formLabelAlign.city}&dayType=${this.formLabelAlign.dayType}&beginTime=${this.formLabelAlign.beginTime}&endTime=${this.formLabelAlign.endTime}`)
      .then(res => {
        // console.log(res);
        let array = []
        if (res.data.messageModel.code == 0) {
          this.FGStableData = res.data.dataModel;
          array = res.data.dataModel;
          // this.Rearrange(array)
          this.loading = false
        } else {
          this.$message.error(res.data.messageModel.messageText);
          this.FGStableData = [];
          this.loading = false
        }
      })
      .catch(error => {
        console.log(error);
      });
    },
    //获取外发分公司报表的方法
    getWFFGSList() {
      this.loading = true
      this.$axios
      .get(`/spider/consumptionLog/getWfDepartmentData?city=${this.formLabelAlign.city}&type=${this.formLabelAlign.type}&dayType=${this.formLabelAlign.dayType}&beginTime=${this.formLabelAlign.beginTime}&endTime=${this.formLabelAlign.endTime}`)
      .then(res => {
        if (res.data.messageModel.code == 0) {
          this.WFFGStableData = res.data.dataModel;
          this.loading = false
        } else {
          this.$message.error(res.data.messageModel.messageText);
          this.WFFGStableData = [];
          this.loading = false
        }
      })
      .catch(error => {
        console.log(error);
      });
    },
    //清空所有筛选条件的方法
    clearAllCheck() {
      for (let i = 0; i < this.formLabelAlign.length; i++) {
        this.formLabelAlign.formLabelAlign[i] = "";
      }
      this.value1 = ""; //未分割的完整版时间区间
    },
    //重排tableData的方法
    Rearrange(array){
      let NewArray = []
      let xinXiLiu = []
      let souSuoXi = []
      let heZuoQD = []
      let QiTa = []
      //插入第一行总计
      NewArray.push(array[0])
      for (let i = 0; i < array.length; i++) {
        if(array[i].quDaoName.indexOf("信息流系") != -1 || array[i].quDaoName.indexOf("信息流系/合计") != -1){
          xinXiLiu.push(array[i])
        }else if (array[i].quDaoName.indexOf("搜索系") != -1 || array[i].quDaoName.indexOf("搜索系/合计") != -1){
          souSuoXi.push(array[i])
        }else if (array[i].quDaoName.indexOf("渠道合作") != -1 || array[i].quDaoName.indexOf("渠道合作/合计") != -1){
          heZuoQD.push(array[i])
        }else if (array[i].quDaoName.indexOf("其它") != -1 || array[i].quDaoName.indexOf("其它/合计") != -1){
          QiTa.push(array[i])
        }
      }
      if (xinXiLiu.length > 0) {
        for (let j = 0; j < xinXiLiu.length; j++) {
          NewArray.push(xinXiLiu[j])
        }
      }
      if (souSuoXi.length > 0) {
        for (let j = 0; j < souSuoXi.length; j++) {
          NewArray.push(souSuoXi[j])
        }
      }
      if (heZuoQD.length > 0) {
        for (let j = 0; j < heZuoQD.length; j++) {
          NewArray.push(heZuoQD[j])
        }
      }
      if (QiTa.length > 0) {
        for (let j = 0; j < QiTa.length; j++) {
          NewArray.push(QiTa[j])
        }
      }
      // console.log(NewArray);
      this.tableData = NewArray;
      this.loading = false
    },
    //将按钮禁用两秒
    disButton(){
      this.disTBN = true
      setTimeout(() => {
        this.disTBN = false
      }, 2000);
    },
    //判断时间种类是否禁用
    hiddenTimeKind(vId) {
      let obj = {};
      obj = this.kindtimeList.find(item => {
        //这里的fenselectList就是上面遍历的数据源
        return item.id === vId; //筛选出匹配数据
      });
      // console.log(obj);
      if (obj.name == "") {
        this.showTimeKind = true;
      } else {
        this.showTimeKind = false;
      }
    },
    //判断时间区间是否隐藏
    holderQuJian(vId) {
      let obj = {};
      obj = this.timeList.find(item => {
        return item.id === vId; //筛选出匹配数据
      });
      if (obj.id == "customize") {
        this.isShow = true;
        this.formLabelAlign.dayType = "customize";
      }  else {
        this.isShow = false;
        this.value1 = ""
      }
    },
    //判断报表的类型
    checkReportKind(val) {
      if (val == "总报表") {
          this.$message.success(  "为您显示总报表" );
          this.formLabelAlign.DisXuanBaoBiao = false;
          this.ShowZiYong = true;
          this.ShowFenGS = false;
          this.ShowTable.ShowJingYingType = false;
          // this.ShowTable.ShowCityDX = false;
          // this.ShowTable.ShowAllZongTable = true;
          if (this.formLabelAlign.BaoBiaoType == "0" || this.formLabelAlign.BaoBiaoType == 0) {
            // 全部
            this.loading = true
            this.ShowTable.ShowAllZongTable = true;
            this.ShowTable.ShowCityDuoXuan = true; //城市多选
            this.ShowTable.ShowZYSTable = false;
            this.ShowTable.ShowJMZTable = false;
            this.ShowTable.ShowCityDX = false;
            this.ShowTable.ShowWFZTable = false;
            this.ShowZYCityDX = false;
            this.getReportList();
          }else if (this.formLabelAlign.BaoBiaoType == "1" || this.formLabelAlign.BaoBiaoType == 1) {
            // 加盟自营
            this.loading = true;
            this.ShowTable.ShowAllZongTable = false;
            this.ShowTable.ShowCityDuoXuan = true; //城市多选
            this.ShowTable.ShowZYSTable = true;
            this.ShowTable.ShowJMZTable = false;
            this.ShowTable.ShowCityDX = false;
            this.ShowTable.ShowWFZTable = false;
            this.ShowZYCityDX = false;
            this.getZYYSList();
            this.getZYKHList();
          }else if (this.formLabelAlign.BaoBiaoType == "2" || this.formLabelAlign.BaoBiaoType == 2) {
            // 加盟
            this.ShowTable.ShowAllZongTable = false;
            this.ShowTable.ShowCityDuoXuan = false; //城市多选
            this.ShowTable.ShowZYSTable = false;
            this.ShowTable.ShowJMZTable = true;
            this.ShowTable.ShowCityDX = false;
            this.ShowTable.ShowWFZTable = false;
            this.ShowZYCityDX = true;
            this.getZJMList();
          }else if (this.formLabelAlign.BaoBiaoType == "3" || this.formLabelAlign.BaoBiaoType == 3) {
            // 外发总报表
            this.ShowTable.ShowAllZongTable = false;
            this.ShowTable.ShowCityDuoXuan = true; //城市多选
            this.ShowTable.ShowZYSTable = false;
            this.ShowTable.ShowJMZTable = false;
            this.ShowTable.ShowCityDX = false;
            this.ShowTable.ShowWFZTable = true;
            this.ShowZYCityDX = false;
            this.getZWFList();
          }else {
            this.loading = true
            this.ShowTable.ShowAllZongTable = false;
            this.ShowTable.ShowCityDuoXuan = false; //城市多选
            this.ShowTable.ShowZYSTable = false;
            this.ShowTable.ShowJMZTable = false;
            this.ShowTable.ShowCityDX = false;
            this.ShowTable.ShowWFZTable = false;
            this.ShowZYCityDX = false;
          }
      }else if (val == "分公司报表") {
          this.$message.success(  "为您显示分公司报表！" );
          this.formLabelAlign.DisXuanBaoBiao = true;
          this.ShowZiYong = false;
          this.ShowFenGS = true;
          this.ShowTable.ShowCityDX = true;
          this.ShowTable.ShowAllZongTable = false;
          this.ShowTable.ShowCityDuoXuan = false;
          this.ShowTable.ShowJingYingType = true;
          this.ShowZYCityDX = false;
          this.getFGSList()
      }
    },
    //判断选择报表类型
    BaoBiaoKind(val){
      // console.log(this.formLabelAlign.BaoBiaoType);
      if (val == "0" || val == 0) {
        this.loading = true
        this.ShowTable.ShowAllZongTable = true;
        this.ShowTable.ShowCityDuoXuan = true; 
        this.ShowTable.ShowZYSTable = false;
        this.ShowTable.ShowJMZTable = false;
        this.ShowTable.ShowCityDX = false;
        this.ShowTable.ShowWFZTable = false;
        this.ShowZYCityDX = false;
        this.getReportList();
      }else if (val == "1" || val == 1) {
        this.loading = true;
        this.ShowTable.ShowAllZongTable = false;
        this.ShowTable.ShowCityDuoXuan = true; 
        this.ShowTable.ShowZYSTable = true;
        this.ShowTable.ShowJMZTable = false;
        this.ShowTable.ShowCityDX = false;
        this.ShowTable.ShowWFZTable = false;
        this.ShowZYCityDX = false;
        this.getZYYSList();
        this.getZYKHList();
      }else if (val == "2" || val == 2) {
        // 加盟
        this.ShowTable.ShowAllZongTable = false;
        this.ShowTable.ShowCityDuoXuan = false; 
        this.ShowTable.ShowZYSTable = false;
        this.ShowTable.ShowJMZTable = true;
        this.ShowTable.ShowCityDX = false;
        this.ShowTable.ShowWFZTable = false;
        this.ShowZYCityDX = true;
        this.getZJMList();
      }else if (val == "3" || val == 3) {
        // 外发总报表
        // this.loading = true
        this.ShowTable.ShowAllZongTable = false;
        this.ShowTable.ShowCityDuoXuan = true; 
        this.formLabelAlign.type = "wf" ;
        this.ShowTable.ShowAllZongTable = false;
        this.ShowTable.ShowZYSTable = false;
        this.ShowTable.ShowJMZTable = false;
        this.ShowTable.ShowCityDX = false;
        this.ShowTable.ShowWFZTable = true;
        this.ShowZYCityDX = false;
        this.getZWFList();
        this.ShowJiaMengFenGS = false;
      }else {
        this.loading = true
        this.ShowTable.ShowAllZongTable = false;
        this.ShowTable.ShowCityDuoXuan = false; //城市多选
        this.ShowTable.ShowZYSTable = false;
        this.ShowTable.ShowJMZTable = false;
        this.ShowTable.ShowCityDX = false;
        this.ShowTable.ShowWFZTable = false;
        this.ShowZYCityDX = false;
      }
    },
    //分页的方法
    handleSizeChange(val) {
      // console.log(val);
      if (this.pageConfig.currentPage != 1) {
        this.pageConfig.currentPage = 1;
        this.pageConfig.pageSize = val;
        this.getReportList();
      } else {
        this.pageConfig.pageSize = val;
        this.getReportList();
      }
    },
    handleCurrentChange(val) {
      this.pageConfig.currentPage = val;
      this.getReportList();
      // }
    },
    //查询
    checkCus() {
      this.loading = true
      // console.log(this.formLabelAlign.BaoBiaoType);
      // if (this.cityId.length == 0) {  this.$message.error("请选择城市进行查询");  return false}
      if (this.value1 != "" || this.formLabelAlign.dayType == "customize") {
        this.formLabelAlign.beginTime = this.value1[0];
        this.formLabelAlign.endTime = this.value1[1];
        if (this.formLabelAlign.beginTime == this.formLabelAlign.endTime) {
          this.formLabelAlign.beginTime = this.formLabelAlign.beginTime + " " + "00:00:00";
          this.formLabelAlign.endTime = this.formLabelAlign.endTime + " " + "23:59:59";
        }
      } else {
        this.formLabelAlign.beginTime = "";
        this.formLabelAlign.endTime = "";
      }
      // if (this.cityId == []) {  //在查询步骤中已有对城市的判空
      //   this.$message.error("请选择城市进行查询");
      //   return false;
      // }
      this.disButton();
      if (this.TabValue == "分公司报表") {
        if(this.formLabelAlign.type == "wf"){
          this.getWFFGSList();
          this.ShowJiaMengFenGS = false;
        }else{
          this.getFGSList();
          this.ShowJiaMengFenGS = true;
        };
      }else{
        if (this.formLabelAlign.BaoBiaoType == "0" || this.formLabelAlign.BaoBiaoType == 0) {
          this.getReportList();
        }else if (this.formLabelAlign.BaoBiaoType == "1" || this.formLabelAlign.BaoBiaoType == 1) {
          this.getZYYSList();
          this.getZYKHList();
        }else if (this.formLabelAlign.BaoBiaoType == "2" || this.formLabelAlign.BaoBiaoType == 2) {
          this.getZJMList();
        }else if (this.formLabelAlign.BaoBiaoType == "3" || this.formLabelAlign.BaoBiaoType == 3) {
          this.getZWFList();
        }else {
          this.loading = true
        }
      }
      
    },
    //添加充值
    addChongZhi() {
      this.dialogFormVisible = false;
      alert("添加新的充值咯");
    },
    //确认编辑
    handleEdit(index, row) {
      var time = "";
      if (this.formLabelAlign.dayType == "today" || this.formLabelAlign.dayType == "yestoday"|| this.formLabelAlign.dayType == "sevenDay"|| this.formLabelAlign.dayType == "tomonth") {
        time = moment(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 1)).format("YYYY-MM ")
      }else if (this.formLabelAlign.dayType == "yesmonth") {
        time = moment(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 30)).format("YYYY-MM ")
      }else{
        this.$message.error("暂不支持自定义时间查询");
        return false;
      }
      if (row.otherLoss === "") {
        this.$message.error("编辑损耗不能为空");
        return false;
      }
      if (row.price === "") {
        this.$message.error("单价不能为空");
        return false;
      }
      if (row.revenue === "") {
        this.$message.error("坐席创收不能为空");
        return false;
      }
      this.$axios
      .get(`/spider/consumptionLog/updateJoinData?departmentName=${row.name}&otherLoss=${row.otherLoss}&price=${row.price}&revenue=${row.revenue}&beginBalance=${row.beginBalance}&time=${time} `)
      .then(res => {
        // console.log(res);
        if (res.data.messageModel.code == 0) {
          // this.Rearrange(array)
          this.$message.success(res.data.messageModel.messageText)
        } else {
          this.$message.error(res.data.messageModel.messageText);
        }
      })
      .catch(error => {
        console.log(error);
      });
    },
    //外发分公司确认编辑
    handleWaiFaEdit(index, row) {
      var time = "";
      if (this.formLabelAlign.dayType == "today") {
        this.$message.error("今日状态下不支持编辑");
        return false;
      }else{
        if (this.formLabelAlign.dayType == "today" || this.formLabelAlign.dayType == "yestoday"|| this.formLabelAlign.dayType == "sevenDay"|| this.formLabelAlign.dayType == "tomonth") {
          time = moment(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 1)).format("YYYY-MM ")
        }else if (this.formLabelAlign.dayType == "yesmonth") {
          time = moment(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 30)).format("YYYY-MM ")
        }else{
          this.$message.error("暂不支持自定义时间修改");
          return false;
        }
        if (row.price === "") {
          this.$message.error("单价不能为空");
          return false;
        }
        this.$axios
        .get(`/spider/consumptionLog/updateJoinData?departmentName=${row.name}&type=${this.formLabelAlign.type}&price=${row.price}&beginBalance=${row.beginBalance}&time=${time} `)
        .then(res => {
          // console.log(res);
          if (res.data.messageModel.code == 0) {
            // this.Rearrange(array)
            this.$message.success(res.data.messageModel.messageText)
          } else {
            this.$message.error(res.data.messageModel.messageText);
          }
        })
        .catch(error => {
          console.log(error);
        });
      }
    },
  },
  // 本地过滤器
  filters: {
    formatTime(value) {
      if (value == null) {
        return "";
      }
      // return moment(value).format("YYYY-MM-DD HH:mm:ss");
      return moment(value).format("YYYY-MM-DD");
    },
    quZheng(val){
      return Math.ceil(val)
    },
    PanNull(val){
      if (val == null) {
        return "总计"
      }else{
        return val
      }
    },
    BaoLiuLiangWei(val){  //保留两位
      if (val != null && val != "" && val != NaN && val != 'NaN' && val != 'Infinity' && val != Infinity) {
        return Math.round(val*100)/100;
      }else{
        return "0"
      }
    },
    ZhuanRate(val){  //保留两位
      if (val != null && val != "" && val != NaN && val != 'NaN' && val != 'Infinity' && val != Infinity) {
        return Math.round(val*100) + "%";
      }else{
        return "0"
      }
    },
    PanDuanNAN(val){  //
      if (val == NaN || val == "NaN") {
        return "0"
      }else if(val == "Infinity" || val == "-Infinity"){ 
        return "";
      }else{
        return val;
      }
    }
  },
  created() {
    this.loading = true
    this.formLabelAlign.dayType = "today"
    //拿到所有城市列表
    this.$axios
      .get(`/spider/department/getAll`)
      .then(res => {
        this.cityList = res.data;
      })
      .catch(error => {
        console.log(error);
      });
    //拿到外发所有城市列表
    this.$axios
      .get(`/spider/WfDepartment/selAllCity`)
      .then(res => {
        this.WFcityList = res.data.dataModel;
        this.cityList2 = res.data.dataModel;
      })
      .catch(error => {
        console.log(error);
      });
    //获取所有报表
    this.getReportList();  
  }
};
</script>

<style  lang='scss'>
.PublicDaataReport-container {
  padding: 20px;
  .titleWithLine{
      border-bottom: 1.2px solid rgb(189, 189, 189);
  }
  //折叠图标
  .el-collapse-item__arrow {
      margin-left: 5px;
      font-weight: 900;
  }
  .el-collapse-item {
      th {
        background-color: #D7D7D7;
      }
      .el-collapse-item__header{
        background-color:#a0c5e8;
        height: 30px;
        border-radius: 3px;
        margin-bottom: 10px;
      }
  }
  .el-dialog {
    // width: 35%;
    #dateOfBirth {
      /deep/.el-input__inner {
        padding-left: 30px !important;
      }
    }
    .el-form-item {
      margin-bottom: 5px;
      /deep/.el-form-item__label {
        width: 150px !important;
      }
      /deep/.el-form-item__content {
        margin-left: 150px !important;
      }
    }
  }
  .el-form-item.BTN {
    /deep/.el-form-item__content {
      margin-left: 20px !important;
    }
  }
  input.el-input__inner {
    width: 170px;
    height: 32px;
    padding-left: 10px;
  }

  //突出隔行的颜色差异
  .el-table {
    font-size: 12px;
    border: 1px solid grey;
    position: relative;
    .cell {
      padding:0 2px;
    }
    .el-input__inner {
      width: 100%;
      text-align: center;
      // color: #409eff;
    }
    .el-table_9_column_83 {
      position: relative;
    }
    .el-table_9_column_84 {
      margin-left: 10px;
    }
    td {
      //取消单元格的上下padding
      padding: 0;
      border-right: 1px solid grey;
      border-bottom: 1px solid grey;
    }
    th {
      //取消单元格的上下padding
      padding: 0;
      border-right: 1px solid grey;
      border-bottom: 1px solid grey;
      .cell {
      text-align: center;
    }
    }
    
    .el-button--mini {
      border: 0;
      padding: 5px 15px;
      margin: 5px 0;
      background: rgba(255, 255, 255, 0.01);
    }
    .toEdit:hover {
      color: skyblue;
    }
  }
  // 时间分类框样式
  input.el-input__inner#kinds,
  /deep/input.el-input__inner#time {
    // width: 85px;
    padding-left: 7px;
    height: 32px !important;
  }
  // 日期选择器
  daterange.el-input,
  .el-date-editor--daterange.el-input__inner,
  .el-date-editor--timerange.el-input,
  .el-date-editor--timerange.el-input__inner {
    width: 240px;
    height: 36px;
    vertical-align: middle;
    .el-date-editor .el-range__icon {
      line-height: 27px;
    }
    .el-date-editor .el-range-separator {
      width: 5%;
    }
    /deep/.block,
    #block {
      border: none !important;
      /deep/.el-date-editor--daterange {
        width: 240px !important;
      }
    }
  }
  .el-form-item {
    display: inline-block;
    margin: 3px 0 3px 10px;
  }
  .el-form-item:nth-child(n + 6) {
    margin-top: 0;
  }
  .el-select.time {
    margin-left: 20px;
  }
  .el-input--suffix .el-input__inner.fanwei {
    padding-right: 30px;
    width: 30px;
  }
  .filterCondition {
    background-color: #fff;
    margin-bottom: 20px;
  }
  .check {
    margin-left: 22px;
    padding: 8px 20px;
  }
  .ell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 0.9;
  }
  //分页框样式设置（避免页面被覆盖）
  .el-pagination .el-input__inner {
    width: 100px;
  }
  //多选框
  #bigBox1 {
    margin-top: 20px;
    #give {
      width: 41px;
      margin-left: 51px;
      font-size: 14px;
    }
    .el-checkbox {
      margin-right: 8px;
    }
    .duoxuankuang {
      margin-right: 10px;
    }
  }
  #bigBox2 {
    margin-top: 20px;
    #give {
      width: 41px;
      margin-left: 51px;
      font-size: 14px;
    }
    .el-checkbox {
      margin-right: 8px;
    }
    .duoxuankuang {
      margin-right: 10px;
    }
  }
}
</style>